<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>

<script lang="ts" setup>
import { type EChartsOption, init } from 'echarts'
import { ref } from 'vue'

import { onMounted } from 'vue'

export interface Props {
  width?: string
  height?: string
}

const props = withDefaults(defineProps<Props>(), { width: '100%', height: '350px' })

const data = [
  {
    name: '四川省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '江西省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '湖南省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '浙江省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '广东省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '山西省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '上海市',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '江苏省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '福建省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  },
  {
    name: '河南省',
    value: (Math.random() * 10).toFixed(0),
    sum: 10
  }
]

const chartRef = ref<HTMLDivElement | null>(null)

const option: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}

onMounted(() => {
  const echartInstance = init(chartRef.value)

  echartInstance.setOption(option)
})
</script>
